<template>
<div id="userBoard">
  <div class="board">
    <div class="board-rank">排名<span>{{user.rank}}</span></div>
    <div class="board-avatar">
      <a-avatar :size="100" shape="square" :image-url="user.avatar" style="border: 1px solid gold"></a-avatar>
    </div>
    <div class="board-username">
      {{user.username}}
    </div>
    <div class="board-footer">
      <a-space direction="vertical">
          <span><span class="board-footer-title">天梯：</span>{{user.score}}</span>
          <span><span class="board-footer-title">胜率：</span>{{(user.winMatches / user.totalMatches * 100)}}%</span>
          <span><span class="board-footer-title">段位：</span>{{user.rankName}}</span>
      </a-space>
    </div>
  </div>
</div>
</template>

<script setup>

import {ref} from "vue";

const props = defineProps({
  user: {
    type: Object,
    default: {
      username: "你的对手",
      rank: "未知",
      avatar: "",
      score: "未知",
      rankName: "未知"
    }
  }
})


</script>

<style scoped>
#userBoard {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.board {
  margin: 0 auto;
  width: 285px;
  height: 380px;
  background: url("src/assets/pk/user-board.png") no-repeat;
  background-size: cover;
}
.board-rank {
  text-align: center;
  padding-top: 14px;
  color: white;
  font-size: 20px;
  margin: 0 0 40px 0;
}
.board-avatar {
  text-align: center;
  margin: 0 0 40px 0;
}
.board-username {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 40px 0;
}
.board-footer {
  text-align: center;
}
.board-footer-title {
  font-weight: bold;
  text-align: left;
}
</style>
